@import '~src/styles/main';

#speech-button {
	border-radius: 0;
	height: 38px;
	background-color: white;
	color: #0066ff;
	box-shadow: none;
	border: none;
	position: initial;
}

@-moz-document url-prefix() {
	.microphone {
		display: none;
	}
}

#speech-button:focus {
	outline: none;
}

.microphone {
	height: 25px;
	width: 25px;
}

@-moz-document url-prefix() {
	.microphone {
	  display: none;
	}
}

@media (max-width: 560px) {
  .logo-and-form {
    flex-direction: column;
  }
  .search-input {
    width: 98vw;
    margin-left: 1vw;
  }
}

.outer-wrapper{
	display: flex;
	flex-direction: column;
	background: #fafafa;
	border-bottom: 1px solid #ebebeb;

	.wrapper{
		padding: 18px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;

		div.logo-and-form {
			margin-right: 82px;
			width: 100%;
			max-width: 767px;
			display: flex;

			a {
				&:hover {
					text-decoration: none;
				}

				div.logo {
					display: block;
					font-family: Courier New;
					padding: 0px 15px;
					font-size: 33px;
					color: var(--accent-color,$accent-color);
				}
			}

			.search-form {
				height: 100%;
				flex: 1;

				.feature {
					top: -42.5px;
					left: -2px;
					position: relative;
					float: right;
					margin-right: 6px;
					button {
						background: white;
						outline: none;
					}
				}

				.search-input {
					@include --center-flex();
					position: relative;
					background: #ffffff;
					border-radius: 2px;
					will-change: box-shadow;
					box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
					transition: box-shadow .2s cubic-bezier(.4,0,.2,1);

					&.focused,
					&:hover {
						box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
					}

					input#search {
						flex: 1;
						border: none;
						padding: 10px 15px;
						font-size: 16px;
						word-spacing: 1.5pt;
						letter-spacing: 0.5pt;
						box-shadow: none;
						height: 44px;
						background: #ffffff;

						&:focus {
							outline: none;
						}
					}
				}
			}
		}

		div.panel {
			position: absolute;
			top: 20px;
			right: 20px;
		}
	}
}

.btn {
	padding: 5.5px 5px;
	a {
		text-decoration: none;
	}
}

#search-suffix-icon {
	color: #d10042;
	text-decoration: none;
}
